<template>
  <div class="share-poster-preview">
    <img crossOrigin="anonymous" class="preview-item background" :src="background">
    <img class="preview-item" v-if="showAvatar" :style="qrCodeStyleCalc" :src="qrCode">
    <img crossOrigin="anonymous" class="preview-item" :style="avatarStyleCalc" :src="avatarCalc">
    <div class="preview-item" v-if="showNickname" :style="nicknameStyleCalc">
      <div class="nickname-content" :style="nicknameContentStyleCalc">
        {{ nicknameFormat() }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      background: {
        type: String,
        default: ''
      },
      avatar: {
        type: String,
        default: ''
      },
      avatarStyle: {
        type: Object,
        default: () => {
          return {}
        }
      },
      nickname: {
        type: String,
        default: ''
      },
      nicknameStyle: {
        type: Object,
        default: () => {
          return {}
        }
      },
      qrCode: {
        type: String,
        default: ''
      },
      qrCodeStyle: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    computed: {
      qrCodeStyleCalc () {
        return {
          width: this.qrCodeStyle.size + 'px',
          height: this.qrCodeStyle.size + 'px',
          left: this.qrCodeStyle.x + 'px',
          top: this.qrCodeStyle.y + 'px'
        }
        // return 'width:' + this.qrCodeStyle.size + 'px;height:' + this.qrCodeStyle.size + 'px;left:' +
        //   this.qrCodeStyle.x + 'px;top:' +
        //   this.qrCodeStyle.y + 'px;'
      },
      nicknameStyleCalc () {
        return {
          // 计算出3.1 1/3*4/0.42
          fontSize: (this.nicknameStyle.size * 3.1) + 'px',
          color: this.nicknameStyle.color,
          left: this.nicknameStyle.x + 'px',
          top: this.nicknameStyle.y + 'px',
          fontVariant: 'normal'
        }
        // return 'left:' + this.nicknameStyle.x + 'px;top:' + this.nicknameStyle.y + 'px;font-size:' + this.nicknameStyle.size * 6 + 'px;color:' + this.nicknameStyle.color
      },
      nicknameContentStyleCalc () {
        return {
          width: this.nicknameStyle.w + 'px',
          height: this.nicknameStyle.h + 'px'
        }
        // return 'width:' + this.nicknameStyle.w + 'px;height:' + this.nicknameStyle.h + 'px;'
      },
      showAvatar () {
        return this.avatarStyle.visible
      },
      showNickname () {
        return this.nicknameStyle.visible
      },
      avatarStyleCalc () {
        const style = {
          width: this.avatarStyle.size + 'px',
          height: this.avatarStyle.size + 'px',
          left: this.avatarStyle.x + 'px',
          top: this.avatarStyle.y + 'px'
        }
        if (this.avatarStyle.circle) {
          style.borderRadius = '50%'
        }
        return style
        // return style + 'width:' + this.avatarStyle.size + 'px;height:' + this.avatarStyle.size + 'px;left:' +
        //   this.avatarStyle.x + 'px;top:' +
        //   this.avatarStyle.y + 'px;'
      },
      /**
       * 代理微信头像
       * @returns {string}
       */
      avatarCalc () {
        return this.avatar ? this.avatar.replace('http://thirdwx.qlogo.cn', 'wechat/image') : 'https://www.bihuo8.com/static-file/lb/avatar.png'
      }
    },
    methods: {
      init (url) {
        return url + '?t=' + new Date().getTime()
      },
      nicknameFormat () {
        const temp = this.nickname
        if (temp.length > 4) {
          return temp.substring(0, 5)
        } else {
          return temp
        }
      }
    }

  }
</script>

<style lang="less">
  .share-poster-preview {
    position: relative;
    left: 0;
    top: 0;
    width: 750px;
    height: 1334px;

    .preview-item {
      position: absolute;
    }

    .background {
      position: absolute;
      top: 0;
      left: 0;
      width: 750px;
      height: 1334px
    }

    .avatar {
      width: 104px;
      height: 104px;
      top: 61px;
      left: 50px;
      border-radius: 50%;
    }

    .nickname {
      font-size: 22px;
      top: 72px;
      left: 177px;
      color: white;
    }

    .qr-code {
      top: 1121px;
      left: 534px;
      width: 163px;
      height: 163px;
    }

    .nickname-content {
      width: 155px;
      display: flex;
      justify-content: center;
    }
  }
</style>
